<template>
  <div>
     <!-- 设置判断条件，如果存在子级且有值 -->
     <template v-if="list.children !==undefined && list.children.length > 0">
        <el-sub-menu :index="list.name/list.id">
           <template #title>
            <el-icon>
                 <Expand />
              </el-icon>
              <span>{{ list.name }}</span>
           </template>
           <template v-for="item in list.children" :key="item.name">
              <RootNav :list="item"></RootNav>
           </template>
        </el-sub-menu>
     </template>

     <!-- 设置终止条件，如果没有子级，就不再调用自己 -->
     <template v-else>
        <el-menu-item :index="list.name/list.id">
           <template #title>
              <el-icon>
                 <Expand />
              </el-icon>
              <span>{{ list.name }}</span>
           </template>
        </el-menu-item>
     </template>
  </div></template>

<script setup>
import { toRefs } from 'vue'

import RootNav from './RootNav.vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})

const { list } = toRefs(props)


</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
}
.container {
  height: 100vh;
}
.aside {
  width: 200px!important;
  background-color: #222832;
}
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.head > div {
  display: flex;
  align-items: center;
}

.head img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.head span {
  font-size: 10px;
  color: #ffffff;
}
.line {
  border-top: 1px solid hsla(0,0%,100%,.05);
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}
.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 10px;
}
</style>

<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
</style>